<template>
  <el-dialog
    title="置顶时间设置"
    :visible.sync="visible"
    width="50%"
    append-to-body
  >
    <avue-form
      ref="editform"
      v-model="form"
      :option="topTimeOption"
    ></avue-form>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        @click="shareTop"
      >
        确定
      </el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { topTimeOption } from '@/const/crud/community-content/dynamic';
import { getTopTime, topShareChoice } from '@/api/core/dynamic';
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    topFlag: {
      type: String,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      form: {
        topTime: '',
      },
      topTimeOption: topTimeOption(),
      loading: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTopTime();
      }
    },
  },
  methods: {
    getTopTime() {
      getTopTime().then((res) => {
        this.form.topTime = res.data.data;
      });
    },
    shareTop() {
      this.$refs['editform'].validate(async (valid, done) => {
        if (valid) {
          const params = {
            id: this.id,
            topEndTime: this.form.topTime,
            flag: this.topFlag,
          };
          this.$confirm(
            `置顶后，该内容会在尾巴圈频道靠前展示，并在置顶结束时间到达10分钟后自动取消置顶，确定置顶吗？`,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
              this.loading = true;
              topShareChoice(params).then(() => {
                this.loading = false;
                this.visible = false;
                this.$emit('refresh');
                done();
              });
            })
            .catch(() => {
              done();
              // this.visible = false;
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>
